<template>
  <div class="container">
    <div class="container-inner">
      <div class="card">
        <div class="card-container">
          <van-field v-model="formData.name" readonly label="姓名"> </van-field>
          <van-field readonly v-model="formData.nationality_name" label="国籍">
          </van-field>
          <van-field
            v-model="formData.card_no"
            readonly
            :label="formData.nationality == 'CN' ? '身份证号' : '证件号码'"
          >
          </van-field>
          <van-field readonly v-model="formData.birthday" label="出生日期">
          </van-field>
          <van-field v-model="formData.tel" readonly label="联系方式">
          </van-field>
          <van-field label="性别" readonly v-model="formData.sex_name">
          </van-field>
          <van-field name="medicalHistoryArr" label="既往病史">
            <template #input>
              <van-checkbox-group
                v-model="formData.medicalHistoryArr"
                direction="horizontal"
              >
                <van-row>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="无"
                      shape="square"
                      disabled
                      >无</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="营养不良"
                      shape="square"
                      disabled
                      >营养不良</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="贫血"
                      shape="square"
                      disabled
                      >贫血</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="高血压"
                      shape="square"
                      disabled
                      >高血压</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="糖尿病"
                      shape="square"
                      disabled
                      >糖尿病</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="心脑血管疾病"
                      shape="square"
                      disabled
                      >心脑血管疾病</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="哮喘"
                      shape="square"
                      disabled
                      >哮喘</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="慢性肺部疾病"
                      shape="square"
                      disabled
                      >慢性肺部疾病</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="肿瘤"
                      shape="square"
                      disabled
                      >肿瘤</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="肺结核"
                      shape="square"
                      disabled
                      >肺结核</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="慢性肾病"
                      shape="square"
                      disabled
                      >慢性肾病</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="慢性肝病"
                      shape="square"
                      disabled
                      >慢性肝病</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="免疫缺陷类疾病"
                      shape="square"
                      disabled
                      >免疫缺陷类疾病</van-checkbox
                    >
                  </van-col>
                  <van-col span="12">
                    <van-checkbox
                      checked-color="#D58913"
                      name="其他"
                      shape="square"
                      disabled
                      >其他</van-checkbox
                    >
                  </van-col>
                </van-row>
              </van-checkbox-group>
            </template>
          </van-field>
          <van-field
            readonly
            v-model="
              formData.area_name +
              '/' +
              formData.street_name +
              '/' +
              formData.community_name
            "
            label="所属区域"
          >
          </van-field>
          <van-field v-model="formData.quarter" readonly label="所属小区">
          </van-field>
          <van-field v-model="formData.address" readonly label="详细地址">
          </van-field>
        </div>
      </div>
    </div>
    <div class="bottom-bar">
      <van-button
        class="bottom-bar-btn"
        block
        size="large"
        color="#D58913"
        type="info"
        text="审核"
        @click="clickAction('examine')"
      />
    </div>
    <van-dialog
      v-model="examineShow"
      :show-confirm-button="false"
      close-on-click-overlay
    >
      <div class="message">请核实是否进行操作</div>
      <div class="message-bottom">
        <van-button
          block
          size="large"
          text="审核不通过"
          @click="clickAction('noPass')"
        /><van-button
          block
          size="large"
          text="审核通过"
          @click="clickAction('pass')"
        />
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { getExamineDetail, updateExamine } from '@/api/school.js'

export default {
  data() {
    return { formData: {}, examineShow: false }
  },

  props: {},

  computed: {},

  watch: {},

  mounted() {
    this.route = this.$route.query
    this.init()
  },

  methods: {
    async init() {
      const formData = await getExamineDetail({
        id: this.route.id,
      })
      if (formData.data.errcode == 0) {
        this.formData = formData.data.data
        if (formData.data.data.medical_history) {
          this.$set(
            this.formData,
            'medicalHistoryArr',
            formData.data.data.medical_history.split(',')
          )
        }
      }
    },
    async clickAction(type) {
      switch (type) {
        case 'examine':
          this.examineShow = true
          break
        case 'pass':
          this.updateExamine(0)
          break
        case 'noPass':
          this.updateExamine(3)
          break
      }
    },
    async updateExamine(del_flag) {
      this.$dialog
        .confirm({
          title: '是否确认操作',
          message: '',
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonColor: '#D58913',
          beforeClose: async (action, done) => {
            if (action === 'confirm') {
              const examineData = await updateExamine({
                ids: [{ id: this.route.id }],
                del_flag: del_flag,
              })
              if (examineData.data.errcode == 0) {
                this.$toast('操作成功')
                this.examineShow = false
                setTimeout(() => {
                  this.$router.go(-1)
                }, 500)
                done()
              } else {
                this.$toast(examineData.data.errmsg)
                done()
              }
            } else {
              done()
            }
          },
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="less" scoped>
.container /deep/ .van-checkbox {
  min-height: 30px;
}

.container /deep/ .van-field__label span {
  display: inline-block;
  padding-left: 5px;
  width: 90%;
  text-align-last: justify;
}

.container {
  background: #f2f7fb;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;

  &-inner {
    padding: 20px 20px 40px;
    background: #f2f7fb;
    .card {
      background: inherit;

      &-container {
        border-radius: 10px;
        overflow: hidden;
        background-color: white;
        padding: 10px;
      }
    }
  }

  .bottom-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
.search {
  position: relative;
  height: 75vh;
  overflow-y: scroll;
  background: #f2f2f2;

  &-body {
    position: sticky;
    width: 100%;
    top: 0;
  }

  &-page {
    padding: 15px 12px 0px;
    background: #f2f2f2;

    &-item {
      background: #fff;
      padding: 20px 10px;
      border-radius: 10px;
      text-align: center;
      margin-bottom: 15px;
    }

    .item-active {
      box-shadow: 0px 0px 5px 3px rgba(255, 145, 0, 0.8);
    }
  }

  &-button {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
.center {
  text-align: center;
}
.field-title {
  padding: 0 5px;
  text-align-last: justify;
}
.field-text {
  padding: 0 5px;
  font-size: 12px;
}
.bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.message {
  padding: 20px;
  text-align: center;

  &-bottom {
    display: flex;
  }
}
</style>
